<template>
  <div class="aituse">
    <div class="a_inner">
      <div class="a_inner_top">
        <div class="a_inner_top_title">
          <h1 v-text="lang.h1Text"></h1>
        </div>
        <!-- {{ lang.h4Text1 }}<span>{{ lang.spanText }}</span>{{ lang.h4Text2 }} -->
        <h4 v-html="lang.h4Text"></h4>
      </div>
      <div class="aituse_content">
        <div 
          class="aituse_content_item" 
          v-for="(item, index) in aituseList" 
          :key="index"
          :class="{no_mar: index%2}"
        >
          <div class="fangkuai"></div>
          <div class="item_body">
            <div class="item_body_img"><img :src="item.imgUrl" :alt="lang.aituseList[index].altText"></div>
            
            <span v-text="lang.aituseList[index].text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    lang: {
      type: Object,
    },
  },
  data () {
    return {
      aituseList: [
        { imgUrl: require("../images/ituse/1.png"), class: '', },
        { imgUrl: require("../images/ituse/2.png"), class: '', },
        { imgUrl: require("../images/ituse/3.png"), class: '', },

        { imgUrl: require("../images/ituse/4.png"), class: '', },
        { imgUrl: require("../images/ituse/5.png"), class: '', },
        { imgUrl: require("../images/ituse/6.png"), class: '', },
        { imgUrl: require("../images/ituse/7.png"), class: '', },
        { imgUrl: require("../images/ituse/8.png"), class: '', },
      ]
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="stylus">
.aituse
  padding-bottom: 120px;
  // background: url(../images/bg4.png) no-repeat center top;
  background-size: auto 1010px;
  .a_inner
    .aituse_content
      overflow: hidden;
      padding-top: 26px;
      .aituse_content_item
        float: left;
        overflow: hidden;
        margin-right: 90px;
        margin-bottom: 30px;
        &.no_mar
          margin-right: 0px;
        &>.fangkuai
          float: left;
          width: 14px;
          height: 80px;
          margin-right: 14px;
          background: #203785;
          border: 1px solid #2764FE;
        .item_body
          float: left;
          // width: 523px;
          width: 390px;
          height: 80px;
          padding-left: 72px;
          line-height: 80px;
          background: #203785;
          border: 1px solid #2764FE;
          text-align: left;
          .item_body_img
            display: inline-block;
            width: 90px;
            img
              height: 40px;
              vertical-align: middle;
              // margin-right: 40px;



</style>
